/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* scss */
import '@src/component/common/BaseSelectUser/components/InfiniteScrollUser/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'

export type InfiniteScrollUserProps = {
  disabled: boolean;
  distance: number;
  loadmore: Function;
}

export interface InfiniteScrollUserSetupState {
  
}

export enum InfiniteScrollUserEmitEventNameEnum {
  Input = 'input',
}

export type InfiniteScrollUserInstance = ComponentInstance & InfiniteScrollUserSetupState
export type InfiniteScrollUserVM = ComponentRenderProxy<InfiniteScrollUserProps> & CommonComponentInstance & InfiniteScrollUserInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserInfiniteScrollUser,
  emits: [],
  props: {
    disabled: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    distance: {
      type: Number as PropType<number>,
      default: 50
    },
    loadmore: {
      type: Function as PropType<Function>,
      default: () => {}
    }
  },
  setup(props: InfiniteScrollUserProps, { emit }) {
    
    const loadmoreOptions = computed(() => {
      return {
        disabled: props.disabled,
        distance: props.distance,
        callback: props.loadmore
      }
    })
    
    return {
      loadmoreOptions
    }
    
  },
  render(h: CreateElement) {
    return (
      <div 
        class={BaseSelectUserComponentNameEnum.BaseSelectUserInfiniteScrollUser}
        v-loadmore={this.loadmoreOptions}
      >
        { this.$slots.default }
      </div>
    )
  }
})
